<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <slot name="biaotou"></slot>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>
        <td>
          <input
            ref="inpRef"
            @blur="btnShow(index)"
            v-if="item.inputVisible"
            v-model.trim="emblem"
            @keyup.enter="enterFn(index)"
            @keyup.esc="escFn()"
            type="text"
          />
          <button
            style="width: 150px"
            v-else
            @click="inpShow(index)"
            class="btn btn-info"
          >
            btn
          </button>
          <br />
          <span
            v-for="(i, x) in item.tags"
            :key="x"
            class="badge rounded-pill bg-secondary"
            >{{ i }}</span
          >
        </td>
        <td>
          <button class="btn btn-danger btn-sm" @click="removeFn(index)">
            删除
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  // name: 'MyTable'
  data() {
    return {
      emblem: "",
    };
  },
  props: ["list"],
  methods: {
    removeFn(index) {
      this.list.splice(index, 1);
    },
    enterFn(index) {
      if (this.emblem == "") {
        alert("输入不能为空");
        return;
      }
      this.list[index].tags.push(this.emblem);
      this.emblem = "";
    },
    escFn() {
      this.emblem = "";
    },
    btnShow(index) {
      this.list[index].inputVisible = false;
    },
    inpShow(index) {
      this.list[index].inputVisible = true;
      this.$nextTick(() => {
        console.log(this.$refs.inpRef);
        // document.querySelector("input").focus();
        this.$refs.inpRef[0].focus();
      });
    },
  },
};
</script>


<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>